<template>
	<view class="work-container">
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" cancelText='查找' placeholder='请输入需要查找的丝码'
			@cancel="cancel">
		</uni-search-bar>
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">丝码</uni-th>
				<uni-th width="50" align="center">删除</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item, index) in silkCodes" :key="item.id">
				<uni-td>{{ item.barcode }}</uni-td>
				<uni-td align="center">
					<view @click.stop="removeRow(index)">-</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<br />
		<button @click="scan_s()">扫丝码 {{silkCodes.length}}</button>
		<br />
		<button @click="scan_k()" size="mini" style="font-size:18px;width:80%;">{{sellcode}}</button>
		<button @click="scan_b()" size="mini" style="line-height:1.37;width:20%;">
			<uni-icons type="more-filled" size="30"></uni-icons>
		</button>
		<br />
		<br />
		<button type="primary" @click="bind()">绑定</button>
		<br />
		<uni-card :title="'单号: ' + this.detail.vbillcode" :extra="formateDate(this.detail.createTime)"
			style="margin: 15px 0 0 0;">

			<text class="title-text">
				产品：{{this.detail.productName}}；排产数：{{this.detail.dispachNum}}；
			</text>
		</uni-card>


		<!-- <button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text> -->
		</button>
		<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
			<view class="button-sp-area">
				<button @click="pickUp()" class="left" type="primary" plain="true" size="mini"><text
						class="word-btn-white">确定</text></button>
				<button @click="closeDrawer('showLeft')" class="right" type="default" plain="true" size="mini"><text
						class="word-btn-white">关闭</text></button>
			</view>
			<scroll-view  scroll-y="true" style="height: 1200rpx;" >
				<radio-group class="uni-list" @change="radioChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
						<view>
							<radio :id="item.id" :value="item.id" :checked="item.checked">
								<text>{{item.barcodeValue}}</text>
							</radio>
						</view>
					</label>
				</radio-group>
			</scroll-view>
		</uni-drawer>

	</view>
</template>

<script>
	import {
		parseTime
	} from "@/utils/ruoyi.js"
	import {
		g2bind,
		searchBarcode
	} from "@/api/glue_injection/get_list.js"
	var barcodeModel = uni.requireNativePlugin("iData-BarcodePlugin-BarcodeModule")
	const modal = uni.requireNativePlugin('modal');
	var globalEvent = uni.requireNativePlugin('globalEvent');
	export default {
		data() {
			return {
				current: 1,
				total: 12,
				pageSize: 12,

				funType: "",
				silkCodes: [],
				resList: [],
				detail: null,
				sellcode: "扫壳码",
				searchValue: null,
				showRight: false,
				showLeft: false,
				radioItems: [],
				pickUpItem: ""
			}
		},
		onLoad() {
			var _this = this;
			const detail = uni.getStorageSync('currentDetail');
			// console.log("detail", detail)
			if (detail == null || detail == undefined || detail == "") {
				_this.detail = {
					id: 0,
					vbillcode: "",
					barcode: null,
					pkMaterial: 0,
					createTime: 1000000000000,
					reportCheckLines: [{
						barcode: null,
						pkCheck: null
					}]
				}
			} else {
				_this.detail = detail
			}
			// 兼容本地测试
			// console.log("detail++++++++")
			// console.log( _this.detail)
			// console.log('detail=' + JSON.stringify(detail));
			uni.removeStorageSync('currentDetail')

			//监听扫码动作。。。根据临时字符串判断是摁了哪个按钮
			globalEvent.addEventListener('iDataBarcodeEvent', function(e) {
				if (_this.funType != "k") {
					// 丝码.判断是否重复扫描
					if (e.barcode == _this.sellcode) {
						uni.showToast({
							title: "重复扫码",
							icon: 'error'
						})
						return;
					}
					for (let i = 0; i < _this.silkCodes.length; i++) {
						if (e.barcode == _this.silkCodes[i].barcode) {
							uni.showToast({
								title: "重复扫码",
								icon: 'error'
							})
							return;
						}
					}
					_this.silkCodes.push({
						id: _this.silkCodes.length,
						barcode: e.barcode
					})
				}
				if (_this.funType == "k") {
					// 壳码.判断是否重复扫描
					for (let i = 0; i < _this.silkCodes.length; i++) {
						if (e.barcode == _this.silkCodes[i].barcode) {
							uni.showToast({
								title: "重复扫码",
								icon: 'error'
							})
							return;
						}
					}
					_this.sellcode = e.barcode

				}
				// _this.silkCodes[0].barcode;
				//连续扫描如果间隔时间比较短，会出现toast不提示的情况，数据可以正常接收到，建议查看控制台输出
				// console.log(JSON.stringify(e));
				_this.funType = "";
				// modal.toast({
				// 	message: "1111111收到条码：" + JSON.stringify(e),
				// 	duration: 1.5
				// });
			});
			barcodeModel.initScan((ret) => {});

		},
		onUnload() {
			barcodeModel.closeScan((ret) => {
				// modal.toast({
				// 	message: ret,
				// 	duration: 1.5
				// });
			});
			globalEvent.removeEventListener('iDataBarcodeEvent');
		},
		methods: {
			async search(res) {
				const ppw = await searchBarcode(1, 50, res.value);
				let _this = this;
				_this.resList = ppw.data.list;
				if (_this.resList.length == 0) {
					uni.showToast({
						title: '没有该丝码',
						icon: 'none'
					})
				}
				//只找到一个自己录入 
				else if (_this.resList.length == 1) {
					for (let i = 0; i < _this.silkCodes.length; i++) {
						if (_this.resList[0].barcodeValue == _this.silkCodes[i].barcode) {
							uni.showToast({
								title: "重复码",
								icon: 'error'
							})
							return;
						}
					}
					_this.silkCodes.push({
						id: _this.silkCodes.length,
						barcode: _this.resList[0].barcodeValue
					})
				} else {
					_this.radioItems = _this.resList;
					// console.log("_this.resList ", radioItems)
					_this.showDrawer('showLeft')
				}
			},
			async cancel(res) {
				const ppw = await searchBarcode(1, 50, res.value);
				let _this = this;
				_this.resList = ppw.data.list;
				if (_this.resList.length == 0) {
					uni.showToast({
						title: '没有该丝码',
						icon: 'none'
					})
				} else if (_this.resList.length == 1) {
					for (let i = 0; i < _this.silkCodes.length; i++) {
						if (_this.resList[0].barcodeValue == _this.silkCodes[i].barcode) {
							uni.showToast({
								title: "重复码",
								icon: 'error'
							})
							return;
						}
					}
					_this.silkCodes.push({
						id: _this.silkCodes.length,
						barcode: _this.resList[0].barcodeValue
					})
				} else {
					_this.radioItems = this.resList;
					_this.showDrawer('showLeft')
				}
			},
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				// console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			radioChange: function(e) {
				let checked = e.target.value
				let _this = this
				for (let i = 0; i < _this.radioItems.length; i++) {
					if (_this.radioItems[i].id = checked) {
						_this.pickUpItem = _this.radioItems[i].barcodeValue;
						return
					}
				}
			},
			pickUp: function(e) {
				let _this = this
				_this.silkCodes.push({
					id: _this.silkCodes.length,
					barcode: _this.pickUpItem
				})
				uni.showToast({
					title: '已添加' + _this.pickUpItem,
					icon: 'none'
				})
			},
			removeRow(index) {
				this.silkCodes.splice(index, 1)
			},
			scan_s() {
				// TODO: 实现扫丝码逻辑
				var _this = this;
				barcodeModel.scanStart((ret) => {
					_this.funType = "s";
				});
			},
			scan_k() {
				// TODO: 实现扫壳码逻辑
				var _this = this;
				barcodeModel.scanStart((ret) => {
					_this.funType = "k";
				});
			},
			scan_b() {
				// TODO: 实现扫丝码逻辑
				var _this = this;
				uni.showModal({
					title: '手动录入条码',
					editable: true,
					content: '',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定',res.content);
							_this.sellcode = res.content
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			bind() {
				// TODO: 实现绑定逻辑
				var _this = this;
				if (_this.sellcode == "扫壳码") {
					uni.showToast({
						title: "没有扫壳码",
						icon: 'error'
					})
					return
				}
				if (_this.silkCodes.length == 0) {
					uni.showToast({
						title: "请扫丝码",
						icon: 'error'
					})
					return
				}
				_this.detail.barcode = _this.sellcode; //壳码清单
				// _this.detail.pkMaterial = _this.detail; //物料id
				_this.detail.createTime = null;
				_this.detail.produceTime = null;
				_this.detail.reportCheckLines = _this.silkCodes; //丝码列表

				g2bind(_this.detail).then(response => {
					_this.sellcode = "扫壳码"
					_this.silkCodes = null;
					_this.silkCodes = []
					// console.log(response);
					this.$modal.msgSuccess("绑定成功")
				})
			},
			formateDate(ttt) {
				return parseTime(ttt).slice(2, 10);
			}
		}
	}
</script>
<style lang="scss">
	.work-container {
		padding: 10px;
		;
	}

	.uni-searchbar {
		padding: 0 0 10px 0;
	}

	.uni-list {
		float: none;
		clear: both;
		padding: 0 10px 10px 10px;
	}

	.uni-list-cell {
		padding: 10px;
	}

	.right {
		float: right;
	}

	.scroll-view {
		display: flex;
		flex-direction: column;
	}

	@media screen and (max-width: 600px) {
		.scroll-view {
			flex-direction: row;
			overflow-x: auto;
		}
	}
</style>